<template>
	<div>
		<div class="center_view edit_form">
			<el-form class="userinfo_form" ref="userinfoFormRef" :model="form">
				<el-row>
					<el-col :span="12">
						<el-form-item label="负责人账号" prop="fuzerenzhanghao">
							<el-input class="list_inp" v-model="user.fuzerenzhanghao" readonly placeholder="负责人账号" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="负责人姓名" prop="fuzerenxingming">
							<el-input class="list_inp" v-model="user.fuzerenxingming"  placeholder="负责人姓名" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="性别" prop="xingbie">
							<el-select 
								class="list_sel" 
								v-model="user.xingbie" 
								placeholder="请选择性别"
								>
								<el-option v-for="item in changqufuzerenxingbieLists" :label="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="手机号码" prop="shoujihaoma">
							<el-input class="list_inp" v-model="user.shoujihaoma"  placeholder="手机号码" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="角色" prop="jiaose">
							<el-select 
								@change="changqufuzerenjiaoseChange"
								class="list_sel"
								multiple
								v-model="user.jiaoses" 
								placeholder="请选择角色"
								>
								<el-option v-for="item in changqufuzerenjiaoseLists" :label="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="区域" prop="quyu">
							<el-select 
								class="list_sel" 
								v-model="user.quyu" 
								placeholder="请选择区域"
								>
								<el-option v-for="item in changqufuzerenquyuLists" :label="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="班次" prop="banci">
							<el-select 
								class="list_sel" 
								v-model="user.banci" 
								placeholder="请选择班次"
								>
								<el-option v-for="item in changqufuzerenbanciLists" :label="item" :value="item"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<span class="formModel_btn_box">
						<el-button class='confirm_btn' type="primary" @click="onSubmit">保存</el-button>
					</span>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import { isNumber,isIntNumer,isEmail,isMobile,isPhone,isURL,checkIdCard } from "@/utils/toolUtil";
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	const tableName = ref('changqufuzeren')
	const user = ref({})
	const changqufuzerenxingbieLists = ref([])
	const changqufuzerenjiaoseLists = ref([])
	const changqufuzerenquyuLists = ref([])
	const changqufuzerenbanciLists = ref([])
	const init = () => {
		changqufuzerenxingbieLists.value = "男,女".split(',')
		changqufuzerenjiaoseLists.value = "班长,区长,普工".split(',')
		changqufuzerenquyuLists.value = "一区,二区,三区,全部".split(',')
		changqufuzerenbanciLists.value = "平烫班,毛巾班,单洗班,台布班,洗衣班,枕套班".split(',')
	}
	const changqufuzerenjiaoseChange= ()=> {
		user.value.jiaose = user.value.jiaoses.join(',')
	}
	const onSubmit = () => {
		if((!user.value.fuzerenzhanghao)){
			context?.$toolUtil.message(`负责人账号不能为空`,'error')
			return false
		}
		if((!user.value.mima)){
			context?.$toolUtil.message(`密码不能为空`,'error')
			return false
		}
		if((!user.value.fuzerenxingming)){
			context?.$toolUtil.message(`负责人姓名不能为空`,'error')
			return false
		}
		if((!user.value.shoujihaoma)){
			context?.$toolUtil.message(`手机号码不能为空`,'error')
			return false
		}
		if((user.value.shoujihaoma)&&(!context?.$toolUtil.isMobile(user.value.shoujihaoma))){
			context?.$toolUtil.message(`手机号码应输入手机格式`,'error')
			return false
		}
		store.dispatch('user/update',user.value).then(res=>{
			if(res?.data&&res.data.code==0)context?.$toolUtil.message('修改成功','success')
		})

	}
	const getInfo = () => {
		context?.$http({
			url: `${tableName.value}/session`,
			method: 'get'
		}).then(res => {
			user.value = res.data.data
			if(user.value.jiaose){
				user.value.jiaoses = user.value.jiaose.split(',')
			}else{
				user.value.jiaoses = []
			}
			init()
		})
	}
	getInfo()
</script>

<style lang="scss" scoped>
	// 表单
	.userinfo_form {
		// form item
		:deep(.el-form-item) {
			// 内容盒子
			.el-form-item__content{
			}
			// 输入框
			.list_inp {
			}
			//下拉框样式
			.list_sel {
				//去掉默认样式
				.select-trigger{
					height: 100%;
					.el-input{
						height: 100%;
					}
				}
			}

		}
		// 按钮盒子
		.formModel_btn_box {
			// 确定按钮
			.confirm_btn {
			}
			// 确定按钮-悬浮
			.confirm_btn:hover {
			}
		}
	}
</style>
